import React from "react";
import '../../index.css';

class Sale extends React.Component{
  state = {
    sale: []
  }
  render(){
    return(
      <div className="sale">
        <div className="left">
          <a href="#"><img src={this.state.sale.length > 0 && this.state.sale[0]['imgSrc']} alt=""/></a>
        </div>
        <div className="right">
          <div className="top">
            <a href="#"><img src={this.state.sale.length > 0 && this.state.sale[1]['imgSrc']} alt="" /></a>
            <a href="#"><img src={this.state.sale.length > 0 && this.state.sale[2]['imgSrc']} alt="" /></a>
          </div>
          <div className="bottom">
            <a href="#"><img src={this.state.sale.length > 0 && this.state.sale[3]['imgSrc']} alt="" /></a>
            <a href="#"><img src={this.state.sale.length > 0 && this.state.sale[4]['imgSrc']} alt="" /></a>
          </div>
        </div>
      </div>
    )
  }
  componentDidMount() {
    fetch('http://localhost:3000/home', {
      headers: {
        "Content-Type" : "application/json"
      }
    })
    .then(response => {
      return response.json()
    })
    .then(res => {
      this.setState({
        sale: res.goodsList
      })
      console.log(res, this.state)
    })
  }
};

export default Sale;